<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="main">
            <div class="main-mains">
                <div class="main-content">
                    <div class="main-mains-top">
                        <router-link to="/pointsNews" class="item active">有积分资讯文章列表</router-link>
                        <router-link to="/noPointsNews" class="item">无积分资讯文章列表</router-link>
                        <!-- <router-link to="/newsCategory?points=1" class="item">有积分资讯分类</router-link> -->
                        <router-link to="/newsCategory?points=0" class="item">无积分资讯分类</router-link>
                    </div>
                    <div class="screen clear">
                        <div class="fl" @click="editNew()">新建资讯</div>
                        <div class="fl" @click="screen()">筛选</div>
                    </div>
                    <div class="tableSibiling">
                            <el-checkbox
                            v-model="checkAllBoolen"
                            @change="checkAll"
                            >全选当前页</el-checkbox>
                            <el-button size="mini" round type="danger" @click="editStatus(checkIdList,0)">批量下架</el-button>
                            <!-- <el-button size="mini" round type="success" @click="editStatus(checkIdList,1)">批量发布</el-button> -->
                        </div>
                     <div class="publicTable toLongTable">
                        <table class="head_table">
                            <tr>
                                <td width="5%"></td>
                                <td width="5%">序号</td>
                                <td width="12%">分类</td>
                                <td width="20%">文章标题</td>
                                <td width="12%">作者</td>
                                <td width="12%">所属项目</td>
                                <td width="12%">发布时间</td>
                                <td width="12%">是否发布</td>
                            </tr>
                        </table>
                        <el-scrollbar>
                            <table class="content_table">
                                <tr v-for="(item,index) in listData" :key="index" :class="{active:index%2==1}">
                                    <td width="5%">
                                        <el-checkbox v-model="checkIdList" :label="item.article_id" @change="changeValue(index)"></el-checkbox>
                                    </td>
                                    <td width="5%">
                                        {{ (index + 1) + 10 * (pages - 1)}}
                                    </td>
                                    <td width="12%">{{item.categorys}}</td>
                                    <td width="20%"><router-link class="active" :to="'/editNew?points=1&type=againEdit&articleId='+item.article_id">{{item.title}}</router-link></td>
                                    <td width="12%">{{item.article_source}}</td>
                                    <td width="12%">{{item.project}}</td>
                                    <td width="12%">{{item.publish_date_format}}</td>
                                    <td width="12%" class="operation">
                                        <el-switch v-model="item.check_status" active-color="#13ce66" inactive-color="#ff4949" :active-value='activeValue' :inactive-value='inactiveValue' @change="editStatus(item.article_id,item.check_status)">
                                        </el-switch>
                                    </td>
                                </tr>
                            </table>
                        </el-scrollbar>
                    </div>
                    <div class="nodataTip" v-if="showNodataTip">
                        <i class="iconfont icon-zanwuneirong"></i>
                        <h5>暂无内容</h5>
                    </div>
                    <div class="orderBotom">
                        <div class="orderBotomRight">
                            <el-pagination @current-change="handleCurrentChange" :page-size="10" :current-page.sync="currentPage" layout="total, prev, pager, next" :total='totalnum'>
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
            <div class="system-menban" v-if="search">
            </div>
            <div class="systemPopup" v-if="search">
                <div class="topTitle">
                    <span>筛选</span>
                    <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <div class="systemPopup-con">
                    <div class="systemPopup-cons clear">
                        <div class="fl">发布时间</div>
                        <div class="fl sel">
                            <el-date-picker v-model="time" type="daterange" value-format="timestamp" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="systemPopup-cons clear">
                        <div class="fl">关键词搜索</div>
                        <div class="fl sel">
                            <el-input placeholder="资讯文章标题/关键字/所属项目" v-model.trim="keyword" clearable>
                            </el-input>
                        </div>
                    </div>
                    <div class="systemPopup-btn clear">
                        <div class="fl" @click="searchs()">确认</div>
                        <div class="fl" @click="hideSystemPopup">取消</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import leftBar from "@/components/leftBar";
import topBar from "@/components/topBar";
import newsMan from "@/api/newsMan";
export default {
  components: {
    leftBar,
    topBar
  },
  data() {
    return {
      data: "newsman",
      pages:1,
      currentPage:1,
      listData: [],
      totalnum: 0,
      showNodataTip: false,
      search: false,
      keyword: "",
      time: [],
      checkIdList: [],
      allArticleId: [],
      checkAllBoolen: false,
      activeValue: 1,
      inactiveValue: 0
    };
  },
  mounted() {
    this.getPointsList();
  },
  methods: {
    searchs() {
      this.pages = 1;
      this.currentPage = 1;
      this.getPointsList();
    },
    handleCurrentChange(val) {
      this.pages = val;
      this.currentPage = val;
      this.getPointsList();
    },
    getPointsList() {
      this.showNodataTip = false;
      this.allArticleId = [];
      let options;
      if (this.time == "" || this.time == null) {
        options = {
          page_index: this.pages,
          page_size: 10,
          key_word: this.keyword,
          begin_time: "",
          end_time: ""
        };
      } else {
        options = {
          page_index: this.pages,
          page_size: 10,
          key_word: this.keyword,
          begin_time: this.time[0] / 1000,
          end_time: this.time[1] / 1000
        };
      }
      newsMan.getPointsList(options).then(res => {
        if (res.code == 1) {
          this.search = false;
          this.listData = res.data.data;
          this.totalnum = res.data.count;
          for (let i = 0; i < this.listData.length; i++) {
            this.allArticleId.push(this.listData[i].article_id);
          }
          if (!res.data.count) {
            this.showNodataTip = true;
          }
        }
      });
    },
    // 单项的change
    changeValue() {
      if (this.checkIdList.length == this.allArticleId.length) {
        this.checkAllBoolen = true;
      } else {
        this.checkAllBoolen = false;
      }
    },
    //全选的change
    checkAll() {
      if (this.checkAllBoolen) {
        this.checkIdList = this.allArticleId;
      } else {
        this.checkIdList = [];
      }
    },
    //上下架
    editStatus(id,status){
      let tip = "";
      let _this = this;
      if(status == 1){
        tip = "发布"
      }
      else{
        tip = "下架"
      }
      if(id instanceof Array && id.length <= 0){
        this.messageAlert("请选择后再操作");
        return;
      }
        this.$confirm("是否" + tip + "选中文章？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
            let options;
            let idArr = [];
            if(id instanceof Array){
              idArr = id;
            } else{
              idArr = [id];
            }
            idArr = JSON.stringify(idArr);
            options = {
                article_id:idArr,
                check_status:status
            }
            newsMan.changeArticleStatus(options).then(res => {
            if (res.code == 1) {
              _this.successfulAlert("操作成功");
              _this.getPointsList();
              _this.checkIdList = [];
              _this.checkAllBoolen = false;
            }
            });
      })
        .catch(() => {
          _this.getPointsList();
        });
    },
    editNew() {
      this.$router.push("/editNew?points=1&type=add");
    },
    screen() {
      this.search = true;
    },
    hideSystemPopup() {
      this.showSystemPopup = false;
      this.search = false;
    },
    //错误弹窗
    messageAlert(msg) {
      this.$message.error(msg);
    },
    //成功弹窗
    successfulAlert(msg) {
      this.$message({
        message: msg,
        type: "success"
      });
    }
  }
};
</script>

<style>
</style>
